<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./js/axios.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .a img {
        width: 100%;
        height: 100%;
      }
      .b{
          width: 400px;
          height: 500px;
          background-color: aqua;
          position: absolute;
          top: 20%;
          left: 35%;
      }
      .b :nth-child(1){
          width: 300px;
          height: 50px;
          margin-top: 40px;
          margin-left: 50px;
      }
      .b :nth-child(3){
          width: 300px;
          height: 50px;
          margin-top: 40px;
          margin-left: 50px;
      }
      .b :nth-child(5){
          width: 300px;
          height: 50px;
          margin-top: 40px;
          margin-left: 50px;
      }
    </style>
    <div class="a">
      <img
        src="https://img2.baidu.com/it/u=2220565380,2694932281&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=466"
        alt=""
      />
      <div class="b">
        <input type="text" name="" id="unIpt" />
      <span></span>
      
      <input type="text" name="" id="pwIpt" />
      <span></span>
      <button id="btn">注册</button>
      </div>
    </div>

    <script>
       let focusTipText = "6-18个字符，可使用数字字母下划线组成，必须字母开头";

// 记录输入框的状态
let isUsername = false;
let isPassword = false;

let unIpt = document.querySelector("#unIpt");
unIpt.onblur = function () {
  //   失去焦点
  //   2-1
  // 输入框的内容
  let username = unIpt.value;
  let usernameReg = /^[a-zA-Z]\w{5,17}$/;
  if (usernameReg.test(username)) {
    //满足正则
    //   2-2 发起ajax请求
    let checkUsernameAPI =
      "http://jx.xuzhixiang.top/ap/api/checkname.php?username=" +
      username;
    let xhr = new XMLHttpRequest();
    xhr.open("get", checkUsernameAPI);
    xhr.send();
    xhr.onreadystatechange = () => {
      if (xhr.readyState == 4 && xhr.status == 200) {
        let obj = JSON.parse(xhr.responseText);
        console.log(obj);
        if (obj.code == 1) {
          //   提示内容 给span
          console.log(this); //xhr   this报错了， this不是unIPt -- 使用unIpt变量
          console.log(unIpt.nextElementSibling); //undefined
          this.nextElementSibling.innerHTML = obj.msg;
          this.nextElementSibling.style.color = "green";
          isUsername = true;
        } else {
          this.nextElementSibling.innerHTML = obj.msg;
          this.nextElementSibling.style.color = "red";
          isUsername = false;
        }
      }
    };
  } else {
    //不满足正则
    this.nextElementSibling.innerHTML = "格式必须是：" + focusTipText;
    this.nextElementSibling.style.color = "red";

    isUsername = false;
  }
};

unIpt.onfocus = function () {
  //   获取焦点
  this.nextElementSibling.innerHTML = focusTipText;
  this.nextElementSibling.style.color = "gray";
};

// -3  验证密码格式是否正确
let pwIpt = document.querySelector("#pwIpt");
pwIpt.onblur = function () {
  //失去焦点的时候验证  密码
  let reg = /^\S{3,18}$/;
  if (reg.test(pwIpt.value)) {
    pwIpt.nextElementSibling.innerHTML = "√";
    pwIpt.nextElementSibling.style.color = "green";
    isPassword = true;
  } else {
    pwIpt.nextElementSibling.innerHTML = "密码只能是 3-18非空字符";
    pwIpt.nextElementSibling.style.color = "red";
    isPassword = false;
  }
};

let btn = document.querySelector("#btn");
btn.onclick = function (evt) {

  if (isUsername && isPassword) {
          
          let ipts = document.querySelectorAll("input");
          let username = ipts[0].value;
          let password = ipts[1].value;
          let regAPi = "http://jx.xuzhixiang.top/ap/api/reg.php";
          axios
            .get(regAPi, {
              params: {
                //对象参数名和变量名一样 ，省略一个
                username,
                password,
              },
            })
            .then((res) => {
              console.log(res.data);
              alert(res.data.msg);
              if (res.data.code == 1) {
                location.href = "zhuce.html";
              }
            });
        } 
};
    </script>
  </body>
</html>
